{% extends 'index.html' %}


{% block content %}
    <!--柱状图-->
    <div class="col-md-6">
        <div class="section-content">
            <div class="content-head"><h4 class="content-title">预测结果可视化-柱状图</h4>
            </div>
            <div class="content-details show">
                <div id="main_bar" style="width: 100%;height:400px; position: relative;">


                </div>
            </div>
        </div>
    </div>
    <!--饼状图-->
    <div class="col-md-6">
        <div class="section-content">
            <div class="content-head">
                <h4 class="content-title">预测结果可视化-饼状图</h4>
            </div>
            <div class="content-details show">
                <div id="main_pie" style="width: 100%;height:400px; position: relative;">

                </div>
            </div>
        </div>
    </div>

    <!--下载按钮-->
    <div class="col-lg-12">
        <div class="section-content">
            <div class="content-head" style="height: 60px;">
                <h4 class="content-title">下载预测结果</h4>
                <div class="corner-content float-right">
                    <a class="btn app-btn bg-info" href="{% url 'predict:download' %}" style="color: black;">
                        <i class="fa fa-save"></i>
                        保存
                    </a>
                </div>
            </div>
        </div>
    </div>

{% endblock %}



{% block script %}
    <!-- 引入ECharts -->
    <script src="/static/js/echarts.min.js"></script>
    <script>
        // 基于准备好的dom,初始化echarts实例
        var myChart1 = echarts.init(document.getElementById('main_bar'));
        var myChart2 = echarts.init(document.getElementById('main_pie'));
        // 指定图表的配置项和数据
        var data = [
          {% for key,value in pie_data.items %}
            {name: '类别{{ key }}', value: {{ value }}},
          {% endfor %}
        ];
        console.log(data);

        var option1 = {
            xAxis: {
                name: '类别',
                data: {{ unique|safe }}
            },
            yAxis: {name: '数量'},
            series: [{
                name: '数量',
                type: 'bar',
                data: {{ counts|safe }},
                label: {
                    show: true,
                    position: 'top'
                }
            }]
        };
        var option2 = {
          title: {
            text: '饼状图',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            left: 'left'
          },
          series: [
            {
              name: '类别',
              type: 'pie',
              radius: '50%',
              data: data,
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        };

        // 使用刚指定的配置项和数据显示图表。
        myChart1.setOption(option1);
        myChart2.setOption(option2);
    </script>
{% endblock %}
